<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <style type="text/css">
            
            /* everything is constructed with a single background image */
            /* root element for tabs */ #flowtabs {
                /* dimensions */
                width: 760px;
                height: 31px !important;
                margin: 0 !important;
                padding: 0;
                /* IE6 specific branch (prefixed with "_") */
                _margin-bottom: -2px;
            }
            
            /* single tab */ #flowtabs li {
                float: left;
                margin: 0;
                padding: 0;
                text-indent: 0;
                list-style-type: none;
            }
            
            /* a- tag inside single tab */ #flowtabs li a {
                background: url(./img/tabs/blue_panes.jpg) no-repeat;
                display: block;
                height: 31px;
                width: 189px;
                padding: 0px;
                margin: 0px;
                /* font decoration */
                color: #000;
                font-size: 12px;
                line-height: 33px;
                text-align: center;
                text-decoration: none;
            }
            
            /* adjust the background image position on each tab */ #flowtabs #t1 {
                background-position: 0 0;
            } #flowtabs #t2 {
                background-position: -189px 0;
            } #flowtabs #t3 {
                background-position: -378px 0;
            } #flowtabs #t4 {
                background-position: -567px 0;
                width: 192px;
            }
            
            /* mouseover state */ #flowtabs a:hover {
                color: #fff;
            } #flowtabs #t1:hover {
                background-position: 0 -33px;
            } #flowtabs #t2:hover {
                background-position: -189px -33px;
            } #flowtabs #t3:hover {
                background-position: -378px -33px;
            } #flowtabs #t4:hover {
                background-position: -567px -33px;
            }
            
            /* currently selected tabs */ #flowtabs a.current {
                cursor: default;
                color: #fff;
                line-height: 34px;
            } #flowtabs #t1.current {
                background-position: 0 -66px;
            } #flowtabs #t2.current {
                background-position: -189px -66px;
            } #flowtabs #t3.current {
                background-position: -378px -66px;
            } #flowtabs #t4.current {
                background-position: -567px -66px;
            }
            
            /* panes */ #flowpanes {
                background: url(./img/tabs/blue_panes.jpg) no-repeat 0 -100px;
                width: 760px;
                height: 450px;
            }
            
            /* single pane */ #flowpanes div {
                display: none;
                color: #fff;
                margin: 20px 40px;
            }
            
            /* some decorations for elements inside single pane */ #flowpanes div h2 {
                font-weight: normal;
                color: #ddd;
                letter-spacing: 1px;
                margin: 10px 0 0 0;
                font-size: 22px;
            } #flowpanes a {
                color: #cc9;
                font-size: 14px;
            } #flowpanes p, #flowpanes samp {
                color: #ccc;
            } #flowpanes .narrow {
                padding-right: 160px;
            }
        </style>
        <style type="text/css">
            #flowtabs li {
                list-style-image: none !important;
                list-style-type: none !important;
                margin: 0 !important;
            } #content div.skin2 div h2 {
                margin-top: 0px;
                color: #ddd;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $("#flowtabs").tabs("#flowpanes > div");
            });
        </script>
    </head>
    <body>
        <!-- tabs -->
        <ul id="flowtabs">
            <li>
                <a id="t1" href="#player_tab">The Player</a>
            </li>
            <li>
                <a id="t2" href="#plugins_tab">Plugins</a>
            </li>
            <li>
                <a id="t3" href="#streaming_tab">Streaming</a>
            </li>
            <li>
                <a id="t4" href="#scripting_tab">Scripting</a>
            </li>
        </ul>
        <!-- panes -->
        <div id="flowpanes">
            <!-- remove the space between tabs and panes -->
            <br clear="all" />
            <div>
                <h2>Lorem ipsum dolor sit amet</h2>
                <img src="./img/title/screens.png" alt="Flying screens" style="float:left;margin:0 30px 200px 0"/>
                <p style="font-weight:bold">
                    Consectetur adipiscing elit. Duis viverra, leo sit amet auctor.
                </p>
            </div>
            <div>
                <h2>Lorem ipsum dolor sit amet</h2>
                <img src="./img/title/eye192.png" alt="Flying screens" style="float:left;margin:0 30px 200px 0"/>
                <p>
                    Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
                </p>
            </div>
            <div>
                <h2>Title for the third tab pane</h2>
                <p>
                    Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui.
                </p>
                <img src="./img/title/eye192.png" alt="Flying screens" />
            </div>
            <div>
                <h2>Fourth pane is here</h2>
                <p>
                    Maecenas at odio. Nunc laoreet lectus vel ante. Nullam.
                </p>
            </div>
        </div>
    </body>
</html>
